<template>
  <div class="filter-containter m-flex-col m-flex-col--top">
    <div class="filter-header"></div>
    <div class="filter-block">
      <filter-item itemName="包含">
        <t-input v-model="includePath" clearable />
      </filter-item>
      <!--排除-->
      <filter-item itemName="排除">
        <t-input v-model="excludePath" clearable />
      </filter-item>
      <!--快捷查询-->
      <filter-item itemName="快捷筛选" layout="vertical">
        <t-tag
          class="shortcurTag"
          v-for="(tag, index) in tags"
          :key="index"
          :theme="curSelectTagIndex === index ? 'primary' : 'default'"
          @click="handleClickTag(tag)">
          {{ tag.name }}
        </t-tag>
        <div>
          <t-tag class="shortcurTag" theme="danger" @click="cancelTag">
            清除选中
          </t-tag>
        </div>
      </filter-item>
    </div>
  </div>
</template>

<script>
import FilterItem from "@/components/FilterItem";
import { searchAllRepos } from "@/api/searchAllRepos.js";
export default {
  name: "FilterMenu",
  components: { FilterItem },
  // 动态请求仓库列表接口
  created() {
    searchAllRepos().then((res) => {
      this.allRepos = res;
      if (!res) {
        return;
      }
      let result = Object.keys(res);
      if (result && Array.isArray(result)) {
        this.gitLabRepoList = [...result];
        // 初始化默认选中全部
        this.selectGitLabRepoList = [...result];
      }
    });
  },
  data() {
    return {
      // search: "",
      selectGitLabRepoList: [],
      gitLabRepoList: [],
      tags: [
        {
          index: 0,
          name: "package.json",
        },
        {
          index: 1,
          name: "armor.js",
        },
        {
          index: 2,
          name: "README.md",
        },
        {
          index: 3,
          name: "yarn.lock",
        },
        {
          index: 4,
          name: "package-lock.json",
        },
      ],
    };
  },
  computed: {
    includePath: {
      get() {
        return this.$store.state.siderFilter.includePath;
      },
      set(v) {
        this.$store.commit("addIncluedPath", v);
      },
    },
    excludePath: {
      get() {
        return this.$store.state.siderFilter.excludePath;
      },
      set(v) {
        this.$store.commit("addExcludePath", v);
      },
    },
    curSelectTagIndex() {
      return this.tags.findIndex((item) => {
        return item.name === this.$store.state.siderFilter.includePath;
      });
    },
    // 为了在搜索结果中获得对应的文件gitlab仓库地址
    allRepos: {
      get() {
        return this.$store.state.siderFilter.allRepos;
      },
      set(v) {
        this.$store.commit("addAllRepos", v);
      },
    },
  },
  methods: {
    // onSearch() {
    //   this.gitLabRepoList = this.gitLabRepoList.filter((item) => {
    //     return item.includes(this.search);
    //   });
    // },
    selectRepo(repoList) {
      console.log("selectRepo -->", repoList);
      this.$store.commit("selectMultRepe", repoList);
    },
    handleClickTag(tag) {
      console.log("handleClickTag -->", tag.name);
      this.$store.commit("addIncluedPath", tag.name);
    },
    cancelTag() {
      console.log("cancelTag -->");
      this.curSelectTagIndex = null;
      this.$store.commit("addIncluedPath", "");
    },
  },
};
</script>

<style lang="scss">
.filter-containter {
  width: 100%;
  height: 100vh;
  padding: 20px 10px;
  .filter-block {
    width: 100%;
  }
}
.shortcurTag {
  margin: 10px;
}
</style>
